I have a b-form-select field and emit my value-field to my parent, but I need the selected text-field too..
Here is the needed code to show what I mean:
In my template:
<b-form-select v-model="selected" :options="getOptions" text-field="Name" value-field="Rank"></b-form-select>
but if I console.log(this.selected), I get of course the value Rank which I have selected. But is it also possible to get the text-field ?
Here is my script to show how my selected works:
computed: {
getOptions() {
const array = [];
const person = this.data.find((i) => i.name === this.name);
for (let key in person.persons) {
array.push(person.persons[key]);
}
return array;
},
}
my json data:
[
{
"name": "XXX",
"persons": {
"1": {
"Name": "Max",
"Rank": "1"
},
"2": {
"Name": "Peter",
"Rank": "2"
},
"3": {
"Name": "Harry",
"Rank": "1"
},
"4": {
"Name": "Jake",
"Rank": "0"
}
}
},
]
As you have the value available, as well as the list of options you can simply add a new computed field to get the selected values text-field
computed: {
getOptions() {
const array = [];
const person = this.data.find((i) => i.name === this.name);
for (let key in person.persons) {
array.push(person.persons[key]);
}
return array;
},
selectedOption() {
if (!this.selected) {
return null;
}
return Object.values(this.getOptions).find((option) => {
return option.Rank === this.selected;
});
}
}
Then access selectedOption.Name or selectedOption.Rank. If you put the Name and Rank into variables / data attributes as well you can also make it more generic.
Update:
Changed to Object.values